<!-- 游戏详情 -->
<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="发布动态"
    width="500px"
    @close="emits('closeDialog')"
  >
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules">
      <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
        <el-select v-model="dialogForm.phone" placeholder="手机号">
          <el-option label="1101234101 Adam" value="1101234101" />
          <el-option label="1101234102 Andhika" value="1101234102" />
          <el-option label="1101234103 Ahmad" value="1101234103" />
          <el-option label="1101234104 Bambang" value="1101234104" />
          <el-option label="1101234105 Bayu" value="1101234105" />
          <el-option label="1101234106 Chaerul" value="1101234106" />
          <el-option label="1101234107 Dani" value="1101234107" />
          <el-option label="1101234108 Nugroho" value="1101234108" />
          <el-option label="1101234109 Eko" value="1101234109" />
          <el-option label="1101234110 Nugroho" value="1101234110" />
          <el-option label="1101234111 Taufik" value="1101234111" />
          <el-option label="1101234112 Panji" value="1101234112" />
          <el-option label="1101234113 Rendi" value="1101234113" />
          <el-option label="1101234114 Teguh" value="1101234114" />
          <el-option label="1101234115 Ujang" value="1101234115" />
          <el-option label="1101234116 Yogi" value="1101234116" />
          <el-option label="1101234117 Anti" value="1101234117" />
          <el-option label="1101234118 Bunga" value="1101234118" />
          <el-option label="1101234119 Cinta" value="1101234119" />
          <el-option label="1101234120 Dewi" value="1101234120" />
          <el-option label="1101234121 Dina" value="1101234121" />
          <el-option label="1101234122 Fani" value="1101234122" />
          <el-option label="1101234123 Intan" value="1101234123" />
          <el-option label="1101234124 Jeni" value="1101234124" />
          <el-option label="1101234125 Kiki" value="1101234125" />
          <el-option label="1101234126 Maya" value="1101234126" />
          <el-option label="1101234127 Pratiwi" value="1101234127" />
          <el-option label="1101234128 Rahma" value="1101234128" />
          <el-option label="1101234129 Utami" value="1101234129" />
          <el-option label="1101234130 Yayah" value="1101234130" />
        </el-select>
      </el-form-item>
      <el-form-item label="动态内容" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.content" type="textarea" :rows="5" />
      </el-form-item>
      <el-form-item label="发布时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="dialogForm.createtime"
          type="datetime"
          placeholder="选择时间"
          :default-time="new Date().getTime()"
        />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage1Success" 
        >
          <img v-if="dialogForm.image1" :src="dialogForm.image1_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage2Success" 
        >
          <img v-if="dialogForm.image2" :src="dialogForm.image2_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage3Success" 
        >
          <img v-if="dialogForm.image3" :src="dialogForm.image3_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload><div style="display: block"></div>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage4Success" 
        >
          <img v-if="dialogForm.image4" :src="dialogForm.image4_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage5Success" 
        >
          <img v-if="dialogForm.image5" :src="dialogForm.image5_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage6Success" 
        >
          <img v-if="dialogForm.image6" :src="dialogForm.image6_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage7Success" 
        >
          <img v-if="dialogForm.image7" :src="dialogForm.image7_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage8Success" 
        >
          <img v-if="dialogForm.image8" :src="dialogForm.image8_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox', source: 'm' }" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage9Success" 
        >
          <img v-if="dialogForm.image9" :src="dialogForm.image9_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";

const dialogFormRef = ref(null);
const btnLoading = ref(null)

defineProps({
  dialogFormVisible: {
      type: Boolean,
      default: false
  },
  dialogForm: {
      type: Object,
      default: {
        phone: "",
        content: "",
        createtime: "",
        image1: "",
        image1_show: "",
        image2: "",
        image2_show: "",
        image3: "",
        image3_show: "",
        image4: "",
        image4_show: "",
        image5: "",
        image5_show: "",
        image6: "",
        image6_show: "",
        image7: "",
        image7_show: "",
        image8: "",
        image8_show: "",
        image9: "",
        image9_show: "",
      }
  }
});
const handleUploaderImage1Success = (res) => {
  emits("handleUploaderImgRequest", res, "image1", "image1_show");
};
const handleUploaderImage2Success = (res) => {
  emits("handleUploaderImgRequest", res, "image2", "image2_show");
};
const handleUploaderImage3Success = (res) => {
  emits("handleUploaderImgRequest", res, "image3", "image3_show");
};
const handleUploaderImage4Success = (res) => {
  emits("handleUploaderImgRequest", res, "image4", "image4_show");
};
const handleUploaderImage5Success = (res) => {
  emits("handleUploaderImgRequest", res, "image5", "image5_show");
};
const handleUploaderImage6Success = (res) => {
  emits("handleUploaderImgRequest", res, "image6", "image6_show");
};
const handleUploaderImage7Success = (res) => {
  emits("handleUploaderImgRequest", res, "image7", "image7_show");
};
const handleUploaderImage8Success = (res) => {
  emits("handleUploaderImgRequest", res, "image8", "image8_show");
};
const handleUploaderImage9Success = (res) => {
  emits("handleUploaderImgRequest", res, "image9", "image9_show");
};
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "handleUploaderImgRequest",
  ]);
const rules = {
  phone: [{ required: true, message: "请选择账号", trigger: "change" }],
//  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
};
// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = { ...dialogForm };
        param.createtime = param.createtime ? Math.floor(new Date(param.createtime).getTime() / 1000) : "";
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
const formLabelWidth = "120px";
</script>
